<template>
  <default-home-card icon="LineChartOutlined" title="各年度捐赠情况 ">
    <a-spin :spinning="spinning" tip="图表加载中....">
      <div class="echarts-box">
        <div id="gauge-main" class="gauge-main"></div>
      </div>
    </a-spin>
  </default-home-card>
</template>
<script setup>
  import DefaultHomeCard from '/@/views/system/home/components/default-home-card.vue';
  import * as echarts from 'echarts';
  import { onMounted, watch, ref } from 'vue';
  import { reactive } from 'vue';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { Echarts } from '../../../../../api/echarts/echarts';
  const spinning = ref(true);
  onMounted(() => {
    init();
  });

  async function init() {
    try {
      let res = await Echarts.YearsInite();
      console.log(res, '折现');
      spinning.value = false;
      let data = res.data;
      let name = [];
      let value = [];

      data.map((item) => {
        name.push(item.name);
        value.push(item.value);
      });
      let option = {
        tooltip: {
          trigger: 'axis',
        },
        title: {
          textStyle: {
            color: 'red',
            fontWeight: 'bold',
          },
          subtextStyle: {
            color: '#aaa',
            fontStyle: 'italic',
          },
          left: 'center',
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            magicType: { show: true, type: ['line', 'bar'] },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
            dataView: {
              show: true,
              lang: ['合计', '关闭', '刷新'],
              optionToContent: function (param) {
                let table = '<table border="1" style="border-collapse: collapse;">';
                table += '<tr><th>名称</th><th>数额</th></tr>';
                data.forEach((item) => {
                  table += `<tr><td style="padding: 8px;text-align: center;">${item.name}</td><td style=" padding: 8px;text-align: center;">${item.value}</td></tr>`;
                });
                table += '</table>';
                return table;
              },
            },
          },
          itemSize: 18,
          showTitle: false,
          tooltip: {
            show: true, // 是否展示提示组件
            formatter: '{b}', // 提示框显示内容，{a} 默认英文名称, {b} 默认中文名称
            formatter: function (param) {
              switch (param.name) {
                case 'dataView':
                  return '<div>' + '数据视图' + '</div>';
                  break;
                case 'restore':
                  return '<div>' + '刷新' + '</div>';
                  break;
                case 'saveAsImage':
                  return '<div>' + '下载' + '</div>';
                  break;
                default:
                  break;
              }
            },
          },
        },

        xAxis: {
          name: '年份',
          data: name,
          axisLabel: {
            interval: 0,
            rotate: 45, //倾斜度 -90 至 90 默认为0
            margin: 5,
          },
        },
        yAxis: {
          name: '金额',
        },
        dataZoom: {
          type: 'slider',
          textStyle: {
            color: 'black',
            fontSize: 18,
          },
        },
        series: [
          {
            type: 'line',
            data: value,
          },
        ],
      };
      let chartDom = document.getElementById('gauge-main');
      if (chartDom) {
        let myChart = echarts.init(chartDom);
        option && myChart.setOption(option);
      }
    } catch (error) {
      smartSentry.captureError(error);
    }
  }
</script>
<style lang="less" scoped>
  .echarts-box {
    display: flex;
    align-items: center;
    justify-content: center;
    .gauge-main {
      width: 100%;
      height: 500px;
      background: #fff;
    }
  }
</style>
